<template>
  <div>
      <!-- 自定义指令：用户可以制作自己的指令 -->
      <ul>
        <!-- 指令必须是 v- 开头 -->
        <li v-blue>泡泡</li>
        <li>蔡徐坤</li>

        <!-- 练习：v-green 让元素颜色变绿 green -->
        <li v-green>坤坤</li>
        <li v-blue>阿斌</li>

        <!-- |带有值的指令 -->
        <li v-color="'orange'">篮球</li>
        <li v-color="'yellow'">唱歌</li>

        <!-- 值true就隐藏 css的display = 'none' -->
        <li v-hide='true'>rap</li>

        <!-- 值false就不隐藏 css的display = '' -->
        <li v-hide='false'>rap2</li>

      </ul>
  </div>
</template>

<script>
  export default {
    // directive：指令
    directives:{
      hide(el,bindings){
        el.style.display = bindings.value ? 'none' : ''
        console.dir(el);
      },

      blue(el){
        // 参数1：指令所在的DOM元素
        console.log(arguments);
        console.log(el);
        el.style.color = 'blue'
      },

      green(el){
        el.style.color = 'green'
      },

      color(el,bindings){
        // 参数1：dom元素
        // 参数2：指令携带的信息，包括名称和值 等...
        console.log(arguments);
        el.style.color = bindings.value
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>